page-finance-calendar {
  .finance-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding: 2.8vw;
    border-bottom: solid $gray-line 1px;

    .header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;

      .date {
        align-self: flex-start;
        color: $primary;
        font-size: 4vw;
        font-weight: bold;
      }

      .title {
        align-self: flex-start;
        font-size: 4vw;
        margin-left: 2rem;
      }
    }

    .rating {
      margin-top: 1.2vw;
    }

    .detail {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 1.2vw;

      .title {
        align-items: center;
        color: $gray-normal;
      }

      .body {
        align-items: center;
        color: $gray-dark;
      }

      .real-value {
        align-items: center;
        color: $primary;
        border: solid $primary 1px;
        font-size: 3vw;
        padding: 1px 3px;
      }
    }
  }

  .event-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    padding: 2.8vw;
    border-bottom: solid $gray-line 1px;

    .title {
      margin-top: 1.2vw;
      font-size: 3.6vw;
    }

    .country {
      margin-top: 1.2vw;
      color: $gray-normal;
    }
  }

  .common-tag {
    font-size: 3vw;
    padding: 1px 3px;
    margin: 1px 0;
  }

  .none-tag {
    @extend .common-tag;
    color: $gray-normal;
    border: solid $gray-normal 1px;
  }

  .up-tag {
    @extend .common-tag;
    color: #e4323b;
    border: solid #e4323b 1px;
  }

  .down-tag {
    @extend .common-tag;
    color: #369132;
    border: solid #369132 1px;
  }

  .scroll-view {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    background-color: white;
    padding: 0;

    .button-md {
      margin-top: 0;
      margin-bottom: 0;
    }

    .button-ios {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .fixed-view {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .button-md {
      margin-top: 0;
      margin-bottom: 0;
    }

    .button-ios {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .tab-btn-common {
    color: white;
    background-color: $primary;
    font-size: 3.6vw;
    text-align: center;
    min-width: 25%;
  }

  .tab-btn-select {
    @extend .tab-btn-common;
    border-bottom: solid white 4px;
  }

  .tab-btn-none {
    @extend .tab-btn-common;
    border-bottom: solid $primary 1px;
  }

  .sub-btn-common {
    color: $primary;
    font-size: 3.6vw;
    text-align: center;
  }

  .sub-btn-select {
    @extend .sub-btn-common;
    border-bottom: solid $primary 3px;
  }

  .sub-btn-none {
    @extend .sub-btn-common;
    border-bottom: solid $gray-line 1px;
  }
}
